<template>
  <div class="camera_outer">
    <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay muted></video>
    <canvas style="display:none;" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>

    <div v-if="imgSrc" class="img_bg_camera">
      <img :src="imgSrc" alt class="tx_img" width="300" height="300">
    </div>

    <button @click="getCompetence()">打开摄像头</button>
    <button @click="stopNavigator()">关闭摄像头</button>
    <button @click="setImage()">拍照</button>

    <!-- 表格 -->
        <el-table
            :data="list"
            height="600"
            border
            style="width: 100%">
            <!-- type="index"获取索引值，从1开始 ，label显示标题，prop 数据字段名，width列宽 -->
            <el-table-column type="index" label="序号" width="150"></el-table-column>
            <el-table-column prop="person.name" label="用户名字" ></el-table-column>
            <el-table-column prop="signinTime" label="签到状态" width="200" >
                <template slot-scope="scope">
                    <span>{{scope.row.signinTime==null?'':"签到成功"}}</span><br>
                    <!-- <span>{{scope.row.signinTime==null?'':""+scope.row.signinTime}}</span> -->
                </template>
            </el-table-column>
        </el-table>
  </div>
</template>
<script>

import faceApi from '@/api/face'

export default {
  data() {
    return {
      list:[],
      videoWidth: 600,
      videoHeight: 400,
      imgSrc: "",
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      signinId: 18,
      pojo: {  
        img64:null
      }
    };
    
  },
  methods: {

    //查询当前的签到情况
    getSignin(signinId){ 
        faceApi.signinById(signinId).then(res=>{  
          const resp = res.data 
          this.list = resp.data.signin.rePersonSigninList
        })
     },

    // 调用权限（打开摄像头功能）
    getCompetence() {
      var _this = this;
      this.thisCancas = document.getElementById("canvasCamera");
      this.thisContext = this.thisCancas.getContext("2d");
      this.thisVideo = document.getElementById("videoCamera");
      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
      if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
      }
      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
      // 使用getUserMedia，因为它会覆盖现有的属性。
      // 这里，如果缺少getUserMedia属性，就添加它。
      if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function(constraints) {
          // 首先获取现存的getUserMedia(如果存在)
          var getUserMedia =
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.getUserMedia;
          // 有些浏览器不支持，会返回错误信息
          // 保持接口一致
          if (!getUserMedia) {
            return Promise.reject(
              new Error("getUserMedia is not implemented in this browser")
            );
          }
          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
          return new Promise(function(resolve, reject) {
            getUserMedia.call(navigator, constraints, resolve, reject);
          });
        };
      }
      var constraints = {
        audio: false,
        video: {
          width: this.videoWidth,
          height: this.videoHeight,
          transform: "scaleX(-1)"
        }
      };
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
          // 旧的浏览器可能没有srcObject
          if ("srcObject" in _this.thisVideo) {
            _this.thisVideo.srcObject = stream;
          } else {
            // 避免在新的浏览器中使用它，因为它正在被弃用。
            _this.thisVideo.src = window.URL.createObjectURL(stream);
          }
          _this.thisVideo.onloadedmetadata = function(e) {
            _this.thisVideo.play();
          };
        })
        .catch(err => {
          console.log(err);
        });
    },
    //  绘制图片（拍照功能）

    setImage() {
      var _this = this;
      // 点击，canvas画图
      _this.thisContext.drawImage(
        _this.thisVideo,
        0,
        0,
        _this.videoWidth,
        _this.videoHeight
      );
      // 获取图片base64链接
      var image = this.thisCancas.toDataURL("image/png");
      _this.imgSrc = image;
      this.$emit("refreshDataList", this.imgSrc);

      this.pojo.img64 = image

      //这里改动了
      // const formData = new FormData();
      // formData.append("img64",image);
      // console.log(image)

      faceApi.signinbyface(this.signinId,this.pojo).then(res=>{  
        const resp = res.data;
        if(resp.flag){  
          this.$message({
                            message: '签到成功',
                            type: 'success'
                        })
        }else{  
          this.$message({
                            message: '签到失败了，请调整摄像头...',
                            type: 'waring'
                        })
        }
        this.getSignin(this.signinId);
      });

      

    },

    stopNavigator() {
      this.thisVideo.srcObject.getTracks()[0].stop();
    }
  }
};
</script>
<style lang="less" scoped>
.camera_outer {
  position: relative;
  overflow: hidden;
  background-size: 100%;
  video,
  canvas,
  .tx_img {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
  }
  .btn_camera {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
    text-align: center;
    color: #ffffff;
  }
  .bg_r_img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
  .img_bg_camera {
    position: absolute;
    bottom: 0;
    left: 1;
    right: 0;
    top: 0;
    img {
      width: 200px;
      height: 200px;
    }
    .img_btn_camera {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      color: #ffffff;
      .loding_img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>